/* ==========================================================================
   TYPOGRAPHY
   ========================================================================== */

body {
    @apply font-sans text-gray-900 text-base tracking-normal dark:text-dark-100;
    font-variant: common-ligatures tabular-nums;
    font-feature-settings: "zero", "ss01", "calt" off;

}

h1, h2, h3, h4, h5, h6 {
    @apply m-0 antialiased;
}

h1 {
    @apply text-2xl font-medium;
    letter-spacing: -0.014em;
}

h2 {
    @apply text-lg font-medium;
    letter-spacing: -0.01em;
}

h3 {
    @apply text-base font-medium;
}

h4 {
    @apply text-sm font-bold;
    letter-spacing: 0.001em;
}

h5 {
    @apply text-xs font-bold;
    letter-spacing: 0.002em;
}

h6 {
    @apply text-3xs font-bold uppercase tracking-widest;
}

a:not([class^="btn"]) {
    @apply text-gray-800 dark:text-dark-150 cursor-pointer;

    &:hover {
        @apply text-blue dark:text-blue-300;
    }
}

.content {
    h1 {
        @apply mb-2 font-medium;
    }

    h2, h3, h4, h5, h6 {
        @apply mb-2 font-bold;
    }

    p, ol, ul, pre {
        @apply text-gray-700 text-sm leading-normal mb-2 dark:text-dark-150;

        a {
            @apply text-blue;
            &:hover {
                @apply underline;
            }
        }
    }

    p {
        &:last-child {
            @apply mb-0;
        }
    }

    pre {
        background-color: #f9f2f4;
        overflow: auto;
        @apply p-2;

        code {
            @apply p-0;
        }
    }
}

a:hover,
a:active,
a:focus {
    text-decoration: none;
}

.bullet {
    @apply inline-block rounded-full bg-gray-700;
    height: 7px;
    width: 7px;
}

.subhead {
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
}

sup {
    top: -0.25em;
}

.little-heading {
    font-size: 11px;
    font-weight: bold;
    padding: 15px 0 0 20px ; [dir="rtl"] & { padding: 15px 20px 0 0 ; }
    letter-spacing: 1px;
    text-transform: uppercase;
}

.list-unstyled {
    @apply list-none p-0;
}

code {
    @apply font-mono rounded text-[#c7254e] dark:text-blue-400 dark:bg-dark-700;
    padding: 2px 4px;
    font-size: 90%;
    background-color: #f9f2f4;
}

.help-block {
    width: 100%;
    p { @apply mb-2 }
}
